<script lang="ts" setup>
import { markRaw, onMounted } from 'vue'
import CAdminTable from '../CAdminTable.vue'
import { TableInfo } from '../tableInfo'
import { Company, dbCompanies } from './helpers/dbCompanies'
import { dbUsers, User } from './helpers/dbUsers'
import DbFormUserOrCompany from './helpers/DbFormUserOrCompany.vue'

const schema = [
  { id: 'id', label: 'ID' },
  { id: 'name', label: '名前' },
  { id: 'companyId', label: 'ユーザーの会社ID' },
  { id: 'companyName', label: '会社名' },
  { id: 'tel', label: '会社のTEL' },
]

onMounted(() => {
  const target = document.querySelector('.admin-table')?.parentNode ?? null
  // @ts-ignore
  if (target) target.style.width = '1090px'
})

const tableInfo: TableInfo<User | Company> = {
  schemaColumns: schema,
  db: [dbUsers, dbCompanies],
  componentForm: markRaw(DbFormUserOrCompany),
  // mapRow: (row) => {
  //   return row
  // },
  // afterFetch: async (map) => {
  //   return 0
  // },
}
</script>

<template>
  <CAdminTable :tableInfo="tableInfo" p_Title="タイトル漢字english" />
</template>
<style scoped></style>
